<template>
  <view class="before-result-page-mbti">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo"/>
    <view class="fixed-right-tip" @click="backToSclList" v-if="showMoreSclBlock">
      更多测评 
      <u-icon color="#7E3508" size="24rpx" name="arrow-right"></u-icon>
    </view>
    
    <template v-for="(img,index) in staticImgs.imgArr" >
      <view class="img-wrapper" :class="{'img-wrapper-1':index===0}">
        <image class="img" :src="img" mode="widthFix"></image>  
        <view class="box-wrapper-1-pos" v-if="index === 0"
          :style="{'top':topH+'rpx'}"
        >
          
          <view class="tit-img-wrapper">
            <image class="img" :src="staticImgs.titImg" mode="widthFix"></image>
          </view>
          <view class="text-box">
            测试结果
          </view>
          <view class="legend-wrapper">
            <image v-if="!reRenderLegend" class="legend-img" :src="legendImg" mode="widthFix"></image>
            <view class="question-img">
              <image class="img" :src="staticImgs.questionImg" mode="widthFix"></image>
            </view>
          </view>
          
          
          <view class="info-box-list" v-if="showGoodsList">
            <view class="info-box" @click="actType='groupA'" :class="{'info-box-act': actType === 'groupA'}"
              :style="{'background-image':`url(${ actType === 'groupA' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
            >
              <view class="more-intro-abs">
                80%的用户选择
              </view>
              <view class="name">基础测试报告</view>
              <view class="price-row">
                <view class="current-price">
                  <view class="unit">¥</view>
                  <view class="num">{{ hasTriggeredSpecificCondition ? goodsGroup[0].preferentialPrice : goodsGroup[0].currentPrice}}</view>
                </view>
                <view class="market-price">
                  <view class="unit">¥</view>
                  <view class="num">{{goodsGroup[0].marketPrice}}</view>
                </view>
              </view>
              <view class="intro-row">
                {{goodsGroup[0].groupDetail}}
              </view>
            </view>
            
            <view class="info-box" @click="actType='groupB'" :class="{'info-box-act': actType === 'groupB'}"
            :style="{'background-image':`url(${ actType === 'groupB' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
            >
              
              <view class="name">完整测试报告</view>
              <view class="price-row">
                <view class="current-price">
                  <view class="unit">¥</view>
                  <view class="num">{{hasTriggeredSpecificCondition ? goodsGroup[1].preferentialPrice : goodsGroup[1].currentPrice}}</view>
                </view>
                <view class="market-price">
                  <view class="unit">¥</view>
                  <view class="num">{{goodsGroup[1].marketPrice}}</view>
                </view>
              </view>
              <view class="intro-row">
                {{goodsGroup[1].groupDetail}}
              </view>
            </view>
            
          </view>
          
          <view class="first-small-btn" @click="confirmHandle"
            :style="{'background-image':`url(${staticImgs.btnBg})`}"
           >
            <!-- <view class="unit">¥</view>
            <view class="price">{{ nowPrice }}</view> -->
            <view>解锁你的专属MBTI形象</view>
            <!-- <view
              class="tip-box"
              v-if="fixeBtnType === 4"
            >
              已享{{couponInfo.discount}}折优惠
            </view> -->
            <view class="abs-tip-box"
              v-if="hasTriggeredSpecificCondition"
            :style="{'background-image':`url(${staticImgs.tipImg})`}"
            >
              1分钟后恢复原价
            </view>
          </view>
          
          <view class="back-to-home-tip-box" @click="backToSclList" >
            放弃获得本次报告，前往大厅发现更多
            <view class="arrow-icon">
              <image  class="img-icon" :src="staticImgs.arrowRight" mode=""></image>
            </view>
          </view>
          
          <view class="scl-intro-box">
            {{sclIntro}}
          </view>
          
        </view>
      
        <view class="box-wrapper-3-pos" v-else-if="index === 2">
          <view  
            class="before-exit-btn-wrapper"
            :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle"  
         >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        <view class="box-wrapper-4-pos" v-else-if="index === 3">
          <view
             class="before-exit-btn-wrapper"
             :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
             @click="confirmHandle"  
          >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
          
        </view>
        
        <view class="box-wrapper-5-pos" v-else-if="index === 4">
          <view
             class="before-exit-btn-wrapper"
             :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
             @click="confirmHandle"  
          >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        
        <view class="box-wrapper-6-pos" v-else-if="index === 5">
          <view
             class="before-exit-btn-wrapper"
             :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
             @click="confirmHandle"  
          >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        
        <view class="box-wrapper-2-pos" v-else-if="index === 1">
          <view
             class="before-exit-btn-wrapper"
             :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
             @click="confirmHandle"  
          >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        
        <view class="box-wrapper-10-pos" v-else-if="index === 9">
          <view
             class="before-exit-btn-wrapper"
             :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
             @click="confirmHandle"  
          >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        <view class="box-wrapper-12-pos" v-else-if="index === 11">
          <view
             class="before-exit-btn-wrapper"
             :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
             @click="confirmHandle"  
          >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        
        <view class="box-wrapper-14-pos" v-else-if="index === 13">
          <view
             class="before-exit-btn-wrapper"
             :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
             @click="confirmHandle"  
          >
            <!-- <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view> -->
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        
      </view>
    </template>
    
    <view class="references-box" v-if="referenceList && referenceList.length">
      <view class="tit">参考文献</view>
      <view class="text-list">
        <view class="text" v-for="(text,index) in referenceList" :key="index">
          [{{index+1}}]{{text}}
        </view>
      </view>
    </view>
    
    <view class="report-time-box">
      <view>此测评报告仅供参考</view>
      <view>报告时间：{{sclTime}}</view>
    </view>
    
    
    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <!-- 解锁专属报告 -->
      
      <view
         class="before-exit-btn-wrapper"
         :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
         @click="confirmHandle"  
      >
        <!-- <view class="price-box">
          <view class="unit">¥</view>
          <view class="num">{{nowPrice}}</view>
        </view> -->
        <view class="btn-text">解锁专属报告</view>
      </view>
      
    </view>
    
    <u-popup :show="showPopup" mode="bottom"  @close="closeHandle" bgColor="transparent" :overlayStyle="{background: 'rgba(0, 0, 0, 0.8)'}"	>
      <view class="popup-wrapper">
        <view class="info-box-list" v-if="showGoodsList">
          <view class="info-box" @click="actType='groupA'" :class="{'info-box-act': actType === 'groupA'}"
            :style="{'background-image':`url(${ actType === 'groupA' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
          >
            <view class="more-intro-abs">
              80%的用户选择
            </view>
            <view class="name">基础测试报告</view>
            <view class="price-row">
              <view class="current-price">
                <view class="unit">¥</view>
                <view class="num">{{ hasTriggeredSpecificCondition ? goodsGroup[0].preferentialPrice : goodsGroup[0].currentPrice}}</view>
              </view>
              <view class="market-price">
                <view class="unit">¥</view>
                <view class="num">{{goodsGroup[0].marketPrice}}</view>
              </view>
            </view>
            <view class="intro-row">
              {{goodsGroup[0].groupDetail}}
            </view>
          </view>
          
          <view class="info-box" @click="actType='groupB'" :class="{'info-box-act': actType === 'groupB'}"
          :style="{'background-image':`url(${ actType === 'groupB' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
          >
            
            <view class="name">完整测试报告</view>
            <view class="price-row">
              <view class="current-price">
                <view class="unit">¥</view>
                <view class="num">{{hasTriggeredSpecificCondition ? goodsGroup[1].preferentialPrice : goodsGroup[1].currentPrice}}</view>
              </view>
              <view class="market-price">
                <view class="unit">¥</view>
                <view class="num">{{goodsGroup[1].marketPrice}}</view>
              </view>
            </view>
            <view class="intro-row">
              {{goodsGroup[1].groupDetail}}
            </view>
          </view>
          
        </view>
        
        
        <view class="pay-btn" @click="payHandle"
        :style="{'background-image':`url(${staticImgs.btnBg3})`}"
        >
          <view style="height: fit-content">
            <u-icon style="height: fit-content;    margin-top: -4rpx;" name="weixin-fill" color="#fff" size="52rpx"></u-icon>
          </view>
          <text class="text"
          
          >立即支付</text>
        </view>
        
      </view>
    </u-popup>
    
    
    <BeforeExitPayModal :price-before="beforePrice" :price-now="nowPrice" @close="beforeExitPayClose" @confirm="beforeExitPayConfirm" :visible="beforeExitPayModalVisible"/>
    
    <BeforeExitPayModal2 isMbti @close="beforeExitPayClose_2" @confirm="beforeExitPayConfirm_2" :visible="modalVisible"/>
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import BeforeExitPayModal from '@/subcontractorD/components/BeforeExitPayModal_1.vue'
  import BeforeExitPayModal2 from '@/subcontractorD/components/BeforeExitPayModal_2.vue'
  import {removeEmptyProperty} from '@/common/utils/util.js'
  
  import {
    orderPay
  } from '@/common/api/scl_api.js'
  import { debounce } from 'lodash'
  let countTimer;
  var app = getApp();
  export default{
    components:{
      navigationBar,
      BeforeExitPayModal,
      BeforeExitPayModal2
    },
    props:{
      scrollTopNum:{
        type:Number,
        default:0
      },
      goodsGroup:{
        type:Array,
        default:[]
      },
      sclId:{
        type:String,
        default:'',
      },
      homeModalType:{
        type:String,
        default:'',
      },
      sclPayBack:{
        type:Boolean,
        default:true
      },
      sclIntro:{
        type:String,
        default:'',
      },
      sclInfo:{
        type: Object,
        default: {},
      },
      couponInfo: {
        type: Object,
        default: {},
      },
      referenceList: {
        type: Array,
        default: []
      },
    },
    data(){
      return{
        navigationBarDataInfo:{
        	"bg_color": "transparent",
        	"color": "#AB2B98",
        	"flag": 1,
        	"name": "MBTI测评",
          "hasEntity":false,
        },
        sclTime: this.$dayjs().format("YYYY-MM-DD HH:mm"),
        danmakuContainer: {},
        showMoreSclBlock:false,
        windowHeight:99999,
        beforeExitPayModalVisible:false,
        modalVisible:false,
        staticImgs:{
          imgArr:[
            this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/bg-1.png',
            // this.imgBaseURL + '/scl/ad/MBTI/love/1@2x.png',
            this.imgBaseURL + '/scl/ad/MBTI/love/2@2x.png',
            this.imgBaseURL + '/scl/ad/MBTI/love/3@2x.png',
            this.imgBaseURL + '/scl/ad/MBTI/love/4@2x.png',
            this.imgBaseURL + '/scl/ad/MBTI/love/5@2x.png',
            this.imgBaseURL + '/scl/ad/MBTI/love/6@2x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-22x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-32x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-42x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-52x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-62x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-72x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-82x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-92x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-102x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-112x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-122x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-132x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-142x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/M-152x.png',
            
          ],
          arrowRight:this.imgBaseURL + '/scl/ad/MBTI/r-arrow.png',
          tipImg:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/tip-img-2.png',
          btnImg:this.imgBaseURL + '/scl/ad/MBTI/unlock-btn.png',
          
          smallBtnImg: this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/btn-bg.png',
          btnBg:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/btn-bg-1.png',
          questionImg:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/question-icon.png',
          tipBg:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/tip-bg.png',
          titImg:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/tit.png',
          
          boxActBg:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/box-act.jpg',
          boxDefBg:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/box-def.jpg',
          btnBg3:this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/btn-bg-3.png',
        },
        mbtiArr:[
          this.imgBaseURL + '/scl/question-page/mbti/ENFJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ENFP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ENTJ.png@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ENTP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ESFJ.png@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ESFP@2x.png	',
          this.imgBaseURL + '/scl/question-page/mbti/ESTJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ESTP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INFJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INFP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INTJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INTP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISFJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISFP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISTJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISTP@2x.png',
        ],
        actType:'groupA',
        showPopup:false,
        loading:false,
        showFixedBtn:false,
        danmukuData:[],
        hasTriggeredSpecificCondition:false,
        hasBackLock:true,
        reRenderLegend:false,
        legendNum:0,
        topH:0,
      }
    },
    computed:{
      fixeBtnType(){
        ///1:默认样式，2：一元带icon，3:一元不带icon，4:其他优惠券
        if(this.sclInfo && this.sclInfo.discountType === 4){
          return 3
        }else if( this.couponInfo && this.couponInfo.id){
          return 4
        }else {
          return 1
        }
      },
      showGoodsList (){
        return this.goodsGroup.length>0
      },
      nowPrice(){
        return this.goodsGroup && this.goodsGroup[this.actType === 'groupA'?0:1] && this.goodsGroup[this.actType === 'groupA'?0:1].preferentialPrice
      },
      beforePrice(){
        return this.goodsGroup && this.goodsGroup[this.actType === 'groupA'?0:1] && this.goodsGroup[this.actType === 'groupA'?0:1].currentPrice
      },
      legendImg(){
        return this.mbtiArr[this.legendNum]
      }
    },
    watch:{
      scrollTopNum(val){
        this.showFixedBtn = val>this.windowHeight
      }
    },
    mounted() {
      const that = this
      uni.getSystemInfo({
        success(res) {
          // that.windowHeight = res.windowHeight - 50
          that.windowHeight = res.windowHeight/res.devicePixelRatio
        }
      })
      this.topH = app.globalData.topHeight * 2
      
      countTimer = setInterval(()=>{
        this.legendNum = this.legendNum+1
        if(this.legendNum === this.mbtiArr.length){
            this.legendNum = 0
        }
        this.reRenderLegend = true
        this.$nextTick(()=>{
          this.reRenderLegend = false
        })
      },2*1000)
      
      // this.$refs.danmakuRef.createTimer()
    },
    beforeDestroy(){
      clearInterval(countTimer)
    },
    methods:{
      backHandle(){
        if(this.hasBackLock){
          this.hasBackLock = false
          if(this.sclPayBack){
            this.beforeExitPayModalVisible = true   
          }else{
           this.modalVisible = true 
          }
        }else{
          if(this.homeModalType == 'love-mbti'){
            uni.setStorageSync('loveMbtiModalVisible',true)
          }else if(this.homeModalType == 'job-mbti'){
            uni.setStorageSync('mbtiModalVisible',true)
          }
          uni.reLaunch({
            url:'/pages/sclList/sclList'
          })
        }
      },
      backToSclList(){
        if(this.homeModalType == 'love-mbti'){
          uni.setStorageSync('loveMbtiModalVisible',true)
        }else if(this.homeModalType == 'job-mbti'){
          uni.setStorageSync('mbtiModalVisible',true)
        }
        uni.reLaunch({
          url:'/pages/sclList/sclList'
        })
      },
      beforeExitPayClose(){
        console.log('===beforeExitPayClose====close')
        this.beforeExitPayModalVisible = false
        this.modalVisible = true
      },
      beforeExitPayConfirm(){
        console.log('===beforeExitPayConfirm====close')
        this.beforeExitPayModalVisible = false
        this.payHandle('Y')
        // uni.reLaunch({
        //   url: '/pages/sclList/sclList?userType=sclList'
        // })
      },
      beforeExitPayClose_2(){
        this.modalVisible = false
      },
      beforeExitPayConfirm_2(){
        this.modalVisible = false
        uni.setStorageSync('mbtiModalVisible',true)
        uni.reLaunch({
          url: '/pages/sclList/sclList?userType=sclList'
        })
        
      },
      payHandle:debounce(async function(isDisPay) {
        if(this.loading) return
        uni.showLoading({
          title:"请求支付中..."
        })
        
        console.log(isDisPay,'=============isDisPay')
              
        this.loading = true
        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          sclPayGroup: this.actType,
          orderType: '7',
          isAdditional:'N',
          discountUid:this.$store.state.user.actCouponId,
          adClickId: uni.getStorageSync('adClickId'),
          isDisPay:(isDisPay == 'Y' || this.hasTriggeredSpecificCondition) ? 'Y' : 'N'
        })
        
        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res=>{
          
          if (res.data.code == 200) {
          	uni.requestPayment({
          		provider: 'wxpay',
          		service: 5,
          		orderInfo: res.data.data.wr,
          		timeStamp: res.data.data.wr.timeStamp,
          		nonceStr: res.data.data.wr.nonceStr,
          		package: res.data.data.wr.packageValue,
          		signType: res.data.data.wr.signType,
          		paySign: res.data.data.wr.paySign,
          		success: function(res) {
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
          		},
          		fail: function(err) {
          			that.$showToast('支付取消');
                uni.showLoading()
                that.showMoreSclBlock = true
                if(isDisPay != 'Y' && that.sclPayBack){
                  
                  that.beforeExitPayModalVisible = true
                  that.hasTriggeredSpecificCondition = true
                  
                  setTimeout(()=>{
                   that.hasTriggeredSpecificCondition = false 
                  },60*1000)
                  
                }else if(!that.sclPayBack){
                  that.modalVisible = true
                }
                
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
          		}
          	});
          } else {
          	that.$showToast(res.data.message);
            setTimeout(()=>{
              uni.hideLoading()
              that.showPopup = false
              that.loading = false
            },300)
          }
        }).catch(e=>{
          setTimeout(()=>{
            this.showPopup = false
            this.loading = false
          },300)
        })

      },500),
      confirmHandle(){
        this.useSubscription(this.preConfirmHandle)
      },
      preConfirmHandle(){        
        const that=this;
      
        const query = uni.createSelectorQuery().in(that);
        query.select('.first-small-btn').boundingClientRect(data => {
        
          if(that.scrollTopNum > data.top){
            that.showPopup = true
          }else{
            that.payHandle()
          }
    
        }).exec();
    
        // this.payHandle()
      },
      closeHandle(){
        this.showPopup = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  
  .references-box {
    margin-top: 70rpx;
    display: flex;
    flex-direction: column;
    width: 100%;
  
    .tit {
      margin-left: 36rpx;
      width: fit-content;
      font-size: 40rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #195199;
      padding-bottom: 6rpx;
      border-bottom: 2rpx solid rgba(25, 81, 153, .3);
    }
  
    .text-list {
      margin: auto;
      margin-top: 18rpx;
      width: 675rpx;
      // height: 1416rpx;
      border: 1rpx solid #C1C1C1;
      padding: 14rpx 18rpx;
  
      .text {
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #666666;
        line-height: 46rpx;
        text-indent: 1.5em;
        text-align: justify;
      }
    }
  }
  
  // .references-box -end
  .report-time-box {
    margin: auto;
    margin-top: 32rpx;
    width: 709rpx;
    border-top: 4rpx solid #666;
    padding-top: 16rpx;
    padding-bottom: 50rpx;
    padding-left: 14rpx;
    padding-right: 14rpx;
    display: flex;
    justify-content: space-between;
  
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 300;
    color: #666666;
  
  }
  
  
  
  .back-to-home-tip-box{
    margin-top: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #1920D0;
    line-height: 40rpx;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    
    .arrow-icon{
      width: 32rpx;
      height: 32rpx;
      .img-icon{
        width: 100%;
        height: 100%;
      }
    }
  }
  
  
  .scl-intro-box{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    line-height: 34rpx;
    
    font-style: normal;
  
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    text-align: center;
    box-sizing: border-box;
    
    background: transparent;
    width: 100%;
    font-size: 28rpx;
    padding: 0 24rpx;
    text-align: justify;
    margin-top: 24rpx;
    color: #333;
  }
  
  .before-result-page-mbti{
    padding-bottom: 10vh;
    background-color: #fff;
    position: relative;
    
    .fixed-right-tip{
      width: 182rpx;
      height: 50rpx;
      column-gap: 14rpx;

      background: linear-gradient( 180deg, #FDE591 0%, #FFCE66 100%);
      border-radius: 32rpx 0rpx 0rpx 32rpx;
      
      position: fixed;
      right: 0;
      top: 280rpx;
      z-index: 24;
      
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20rpx;
      
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #7E3508;
      // line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }
    
    
    .danmu-wrapper-pos{
      height: 450rpx;
      width: 750rpx;
      // background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      
      z-index: 1;
      
      .danmu-wrapper{
        width: 100%;
        height: 100%;
        position: relative;
      }
    }
    
    .img-wrapper-1{
      height: 1580rpx;
    }
    .img-wrapper{
     position: relative; 
     
     .img{
       width: 750rpx;
       // margin-bottom: 10px;
     }
     
     .box-wrapper-1-pos{
        position: absolute;
        // bottom: 0;
        top: 640rpx;
        left: 0;
        right: 0;
        
        // display: flex;
        // justify-content: center;
        
 
        
        // .col-2{
        //   width: 300rpx;
        //   height: 80rpx;
        //   display: flex;
        //   justify-content: center;
        //   align-items: center;
        //   margin: auto;

        //   margin-top: 40rpx;
          
        //   .img{
        //     width: 100%;
        //     height: 100%;
        //   }
          
        // }
        
     }
     // .box-wrapper-1-pos -- end
     
     
     .small-btn-wrapper{
       width: 400rpx;
       height: 100rpx;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       
       margin-top: 40rpx;
       .img{
         width: 100%;
         height: 100%;
       }
     }
     
     .before-exit-btn-wrapper{
       width: 400rpx;
       height: 100rpx;
       // background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
       // border-radius: 40rpx;
       
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       position: relative;
       
       background-size: 100%;
       background-repeat: no-repeat;
       
       .price-box{
         display: flex;
         align-items: flex-end;
         
         .unit{
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #FFFFFF;
           line-height: 37rpx;
           
           font-style: normal;
               margin-bottom: 4rpx;
               margin-right: 4rpx;
         }
         
         .num{
           font-family: HelveticaNeue, HelveticaNeue;
           font-weight: 500;
           font-size: 50rpx;
           color: #FFFFFF;
           line-height: 61rpx;
           
           font-style: normal;
         }
       }
       
       .abs-tip-box{
         position: absolute;
         bottom: 62rpx;
         left: 50%;
         transform: translateX(-50%);
         
         background-repeat: no-repeat;
         background-size: 100%;
         
         
         // display: flex;
         // justify-content: center;
         // align-items: center;
          width: 240rpx;
          height: 60rpx;
          box-sizing: border-box;
          text-align: center;
          padding-top: 6rpx;
          background-repeat: no-repeat;
          background-size: 100%;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FF4A4A;
          // line-height: 30rpx;
          // text-align: left;
          font-style: normal;
          
              // text-align: center;

       }
       
       .btn-text{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 30rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: center;
         font-style: normal;
         // margin-left: 12rpx;
       }
       
       margin-top: 40rpx;
     }
     
     .box-wrapper-3-pos{
       position: absolute;
       
       top: 274rpx;
           left: 0;
           right: 0;
     }
     
     .box-wrapper-4-pos{
       position: absolute;
       bottom: 314rpx;
       left: 0;
       right: 0;
     }
     
     .box-wrapper-5-pos{
       position: absolute;
       bottom: 100rpx;
       left: 0;
       right: 0;
     }

      .box-wrapper-6-pos{
        position: absolute;
        bottom: 254rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-2-pos{
        position: absolute;
        bottom: 268rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-10-pos{
        position: absolute;
        bottom: 332rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-12-pos{
        position: absolute;
        bottom: 200rpx;
        left: 0;
        right: 0;
      }
      
     .box-wrapper-14-pos{
       position: absolute;
       bottom: 220rpx;
       left: 0;
       right: 0;
     }
    }
    
    // .img-wrapper -- end
    
    
    .info-box-list{
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 24rpx;
      
      
      .info-box{
        width: 334rpx;
        height: 280rpx;
        border-radius: 14rpx;
        // border: 1rpx solid #D1D0D0;
        box-sizing: border-box;
        
        position: relative;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        background-repeat: no-repeat;
        // background-size: 100%;
            background-size: contain;

                
        .more-intro-abs{
          position: absolute;
          
          top: -32rpx;
          left: 0rpx;
          
          width: 232rpx;
          height: 50rpx;
          background: linear-gradient( 180deg, #FFD396 0%, #FF6e2c 100%);
          border-radius: 0rpx 14rpx 0rpx 14rpx;
          
          line-height: 50rpx;
          text-align: center;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #7D3305;
          font-style: normal;
        }
        
        .name{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
        }
        
        .price-row{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 6rpx;
          margin-bottom: 6rpx;
          
          column-gap: 12rpx;
          
          .current-price{
            display: flex;
            align-items: center;
            column-gap: 4rpx;
            .unit{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #FF4A4A;
              line-height: 37rpx;
              text-align: left;
              font-style: normal;
            }
            .num{
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 60rpx;
              color: #FF4A4A;
              line-height: 74rpx;
              text-align: left;
              font-style: normal;
              
            }
          }
          
          .market-price{
            display: flex;
            align-items: center;
            column-gap: 4rpx;
            position: relative;
            
            
            ::before{
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 68rpx;
              height: 1rpx;
              background: #888;
              transform: translate(-50%);
            }
            
    
            
            
            .unit{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
            .num{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
        
        
        
        .intro-row{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 21rpx;
          color: #666666;
          line-height: 29rpx;
          
          font-style: normal;
          
          width: 280rpx;
          height: 100rpx;
          // background: #F4F5F8;
          background: linear-gradient( 167deg, #FEEDFF 0%, #FFDDF2 100%);
          border-radius: 8rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          
          
          text-align: center;
          box-sizing: border-box;
          padding: 0 18rpx;
          
          
        }
        
      }
     
     
     .info-box-act{
       // border: 3rpx solid #728AFF;
     }
      
    }
    
    // .info-box-list -- end
    
    
    
    .btn-wrapper-pos{
     position: fixed; 
     bottom: 7vh;
     
     left: 0;
     right: 0;
     
     display: flex;
     justify-content: center;
     
     .before-exit-btn-wrapper{
       width: 400rpx;
       height: 100rpx;
       
       // background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
       // border-radius: 40rpx;
       
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       
       background-repeat: no-repeat;
       background-size: 100%;
       
       .price-box{
         display: flex;
         align-items: flex-end;
         
         .unit{
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #FFFFFF;
           line-height: 37rpx;
           
           font-style: normal;
               margin-bottom: 4rpx;
               margin-right: 4rpx;
         }
         
         .num{
           font-family: HelveticaNeue, HelveticaNeue;
           font-weight: 500;
           font-size: 50rpx;
           color: #FFFFFF;
           line-height: 61rpx;
           
           font-style: normal;
         }
       }
       
       .btn-text{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 30rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: center;
         font-style: normal;
         margin-left: 12rpx;
       }
       
       // margin-top: 40rpx;
       
     }
     
     
     .btn-wrapper{
       width: 600rpx;
       height: 90rpx;
       .btn-img{
         width: 100%;
         height: 100%;
       }
     }
    }
   
   
   .popup-wrapper{
     width: 750rpx;
     min-height: 502rpx;
     background: #FFFFFF;
     border-radius: 40rpx 40rpx 0rpx 0rpx;
     box-sizing: border-box;
     padding-top: 66rpx;
     padding-bottom: constant(safe-area-inset-bottom); 
     padding-bottom: env(safe-area-inset-bottom); 
     
     .pay-btn{
       width: 660rpx;
       height: 202rpx;
       // background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
       border-radius: 45rpx;
       
       display: flex;
       // align-items: center;
       justify-content: center;
       margin: auto;
       margin-top: 40rpx;
       
       padding-top: 68rpx;
       
       background-repeat: no-repeat;
       background-size: contain;
       box-sizing: border-box;
       
       .u-icon{
             height: fit-content;
       }
       
       .text{
         font-family: PingFang-SC, PingFang-SC;
         
         font-size: 32rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: left;
         font-style: normal;
         margin-left: 10rpx;
       }
     }
     
     
   } 
  }
  
  @keyframes showDivAni{
  	0%{opacity:0;}
  	100%{opacity: 1;}	
  }
  
  .box-wrapper-1-pos{
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    
    .first-small-btn{
          margin-top: 40rpx;

      width: 660rpx;
      height: 189rpx;
      box-sizing: border-box;
      position: relative;
      
      background-repeat: no-repeat;
      background-size: 100%;
      
      display: flex;
      // align-items: center;
      justify-content: center;
      
      padding-top: 68rpx;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      // line-height: 45rpx;
      
      text-align: left;
      font-style: normal;
      
      .unit{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
            margin-top: 9rpx;

      }
      .price{
        font-size: 40rpx;
        margin-right: 10rpx;
        margin-top: -4rpx;

        
      }
      
      
      .tip-box{
        position: absolute;
        right: 30rpx;
        top: 12rpx;
      }
      
      .abs-tip-box{
        position: absolute;
        // bottom: 62rpx;
        top:0;
        left: 50%;
        transform: translateX(-50%);
        
        background-repeat: no-repeat;
        background-size: 100%;
        
        
        // display: flex;
        // justify-content: center;
        // align-items: center;
         width: 240rpx;
         height: 60rpx;
         box-sizing: border-box;
         text-align: center;
         padding-top: 6rpx;
         background-repeat: no-repeat;
         background-size: 100%;
         
         font-family: PingFangSC, PingFang SC;
         font-weight: 500;
         font-size: 26rpx;
         color: #FFFFFF;
         // line-height: 37rpx;
         // text-shadow: 0px 2px 8px #4D79C2;
         text-align: center;
         font-style: normal;
         
             // text-align: center;
      
      }
    }
    
    .tit-img-wrapper{
      margin-top: 34rpx;
      width: 580rpx;
      height: 64rpx;
      .img{
        width: 100%;
        height: 100%;
      }
    }
    .text-box{
          margin-top: 26rpx;

      position: relative;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #AB2B98;
      line-height: 45rpx;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
      
      &::after,&::before{
        position: absolute;
        content: ' ';
        
        border-top: 1px solid #AB2B98;
        top: 50%;
        transform: translateY(-50%);
        width: 40rpx;
      }
      &::after{
        left: -60rpx;  
      }
      &::before{
        right: -60rpx;
      }
    }
  }
  
  .legend-wrapper{
    margin-top: 22rpx;
    width: 480rpx;
    height: 446rpx;
    position: relative;
    .legend-img{
      animation:showDivAni .8s 1;
      width: 100%;
      height: 100%;
    }
    
    .question-img{
      width: 220rpx;
      height: 88rpx;
      position: absolute;
      left: 130rpx;
      bottom: 50rpx;
      
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
  
  
  .tip-box{
    border-radius: 23rpx  23rpx  23rpx  0rpx;
    background: linear-gradient( 180deg, #F89DFF 0%, #F155EB 100%);
    
    padding: 4rpx 22rpx;
    height: 46rpx;
    
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFDA;
    line-height: 40rpx;
    text-align: center;
    font-style: normal;
  }
</style>